<template>
	<jc-page>
		<view class="list u-skeleton">
			<!-- 下拉刷新组件,可参考 https://ext.dcloud.net.cn/plugin?id=3935-->
			<z-paging ref="paging" v-model="formData.dataList" @query="queryList">
				<!-- 将不需要参与滚动的部分，放在slot="top"的view中，如果只有一个标签，可以直接在此标签上写slot="top"，将自定义的导航栏放到里面即可 -->
				<view slot="top">
					<u-navbar :is-back="true" :back-icon-color="vuex_titleColor" :title="title"
						:title-color="vuex_titleColor" :background="vuex_navBackground"></u-navbar>
					<view class="stop u-flex">
						<view class="u-flex-11">
							<uni-search-bar ref="searchBar" class="u-flex-11" placeholder="请输入搜索内容" bgColor="#ffffff"
								v-model="searchText" focus @search-click="searchClick" @clear="clear"
								cancelButton="none" disabled />
						</view>
						<view class="u-flex-1">
							<u-icon v-if="formData.waterfall" name="/static/images/dtms.png" custom-prefix="custom-icon"
								size="22px" :color="vuex_themeColor" @click="switchsWaterfall"></u-icon>
							<u-icon v-if="!formData.waterfall" name="/static/images/xtms.png"
								custom-prefix="custom-icon" size="22px" :color="vuex_themeColor"
								@click="switchsWaterfall"></u-icon>
						</view>
					</view>
					<view class="stop">
						<jc-orderby :optionlist="optionlist" @change="changeOption"></jc-orderby>
					</view>
				</view>
				<!-- 设置自己的emptyView组件，非必须。空数据时会自动展示空数据组件，不需要自己处理, 具体参数可参考 https://z-paging.com/api/props/empty.html-->
				<z-paging-empty-view slot="empty" empty-view-text="没有数据哦~" empty-view-fixed></z-paging-empty-view>
				<!-- 商品显示列表，可参考：https://ext.dcloud.net.cn/plugin?id=2651-->
				<uni-list :class="{ 'uni-list--waterfall': formData.waterfall }">
					<uni-list-item :border="!formData.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
						v-for="item in formData.dataList" :key="item.prodId"
						:to="'/pages/detail/detail?id='+item.prodId+'&title='+item.prodName">
						<template v-slot:header>
							<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }">
								<u-image width="100%" height="100%" :src="'http://175.19.30.69:9008/'+item.mainLagerImgUrl" mode="aspectFill"></u-image>
							</view>
						</template>
						<view slot="body" class="shop">
							<view>
								<view class="uni-title">
									<text class="uni-ellipsis-2">{{ item.prodName }}</text>
								</view>
								<view>
									<text v-if="item.goods_tip" class="uni-tag hot-tag">{{ item.goods_tip }}</text>
									<text v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text>
								</view>
							</view>
							<view>
								<view class="shop-price">
									<text>¥</text>
									<text class="shop-price-text">{{ item.price }}</text>
									<text>.00</text>
								</view>
								<view class="uni-note">{{ item.comment_count | noData('0')}}条评论 月销量 {{ item.month_sell_count | noData('0')}}
								</view>
							</view>
						</view>
					</uni-list-item>
				</uni-list>
			</z-paging>
		</view>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</jc-page>
</template>

<script>
	export default {
		data() {
			return {
				where: '',
				searchText: '',
				formData: {
					waterfall: false, // 布局方向切换  false 1行1列  true 一行2列
					dataList: [] //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				},
				optionlist: [{
					name: '综合',
					value: 'composite',
					isAsc: false
				}, {
					name: '销量',
					value: 'sales',
					isAsc: false
				}, {
					name: '新品',
					value: 'nts',
					isAsc: false
				}, {
					name: '价格',
					value: 'price',
					isAsc: false
				}],
				loading: true, // 是否显示骨架屏组件
			};
		},
		computed: {
			title() {
				//获取国际化标签 如果不需要国际化，直接定义标签属性即可
				return this.$t('shop.title')
			}
		},
		onLoad(option) {
			if (option != undefined && option.classifyId != null) {
				console.log("classifyId：" + option.classifyId)
			}
			setTimeout(() => {
				this.loading = false;
			}, 5000)
			console.log("xxxxx")
		},
		onShow(options) {
			this.searchText = getApp().globalData.searchText;
			console.log("触发搜索条件")
		},
		methods: {
			/**
			 * 切换商品列表布局方向
			 */
			switchsWaterfall() {
				this.formData.waterfall = !this.formData.waterfall;
			},
			queryList(pageNo, pageSize) {
				console.log("queryList:", pageNo, pageSize)
				let dataList = [{
						prodId: '1',
						prodName: '商品一',
						mainLagerImgUrl: 'http://www.qingchenshengwu.cn/res/img/20210819/71d32a5bf6964459870380b141d1395e1.jpeg',
						goods_tip: '自营',
						price: '150',
						tag: ['热销', '手机'],
						comment_count: '100',
						month_sell_count: '100'
					},
					{
						prodId: '2',
						prodName: '这个是一个很长很长的标题，这个没有人返回吧，我觉得我弄的更长，也没有人返回，及时返回也无效',
						mainLagerImgUrl: 'http://www.qingchenshengwu.cn/res/img/20210819/71d32a5bf6964459870380b141d1395e1.jpeg',
						goods_tip: '自营',
						price: '150',
						tag: ['热销', '手机'],
						comment_count: '100',
						month_sell_count: '100'
					},
					{
						prodId: '3',
						prodName: '这个是一个很长很长的标题，这个没有人返回吧，我觉得我弄的更长，也没有人返回，及时返回也无效',
						mainLagerImgUrl: 'http://www.qingchenshengwu.cn/res/img/20210819/71d32a5bf6964459870380b141d1395e.jpeg',
						goods_tip: '自营',
						price: '150',
						tag: ['热销', '手机'],
						comment_count: '100',
						month_sell_count: '100'
					},
					{
						prodId: '4',
						prodName: '这个是一个很长很长的标题，这个没有人返回吧，我觉得我弄的更长，也没有人返回，及时返回也无效',
						mainLagerImgUrl: 'http://www.qingchenshengwu.cn/res/img/20210819/71d32a5bf6964459870380b141d1395e.jpeg',
						goods_tip: '自营',
						price: '150',
						tag: ['热销', '手机'],
						comment_count: '100',
						month_sell_count: '100'
					},
					{
						prodId: '5',
						prodName: '这个是一个很长很长的标题，这个没有人返回吧，我觉得我弄的更长，也没有人返回，及时返回也无效',
						mainLagerImgUrl: 'http://www.qingchenshengwu.cn/res/img/20210819/71d32a5bf6964459870380b141d1395e.jpeg',
						goods_tip: '自营',
						price: '150',
						tag: ['热销', '手机'],
						comment_count: '100',
						month_sell_count: '100'
					}
				];
				this.$refs.paging.complete(dataList)
				
				let parms = {
					page: {
						pageNum: pageNo,
						pageSize: pageSize
					},
					platId: 1
				}
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，请在网络请求回调中
				//通过this.$refs.paging.complete(请求回来的数组);将请求结果传给z-paging
				// this.$u.api.selectProdInfoPage({"in":JSON.stringify(parms)}).then(res => {
				// 	if(res.retCode == 1){
				// 		this.$refs.paging.complete(res.objs);
				// 	}
				// })
			},
			changeOption(v) {
				//排序切换
				console.log(v.name, v.isAsc, v.value)
			},
			navigateTo(path) {
				this.$Router.push({
					path: path
				})
			},
			clear() {
				getApp().globalData.searchText = '';
			},
			searchClick() {
				uni.hideKeyboard();
				uni.navigateTo({
					url: '/pages/search/search',
					animationType: 'fade-in'
				});
				this.$u.vuex('vuex_isSerarchBack', true);
			}
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.stop {
		background-color: #ffffff;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop-picture {
		width: 110px;
		height: 110px;
	}

	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}

	.shop-price {
		margin-top: 5px;
		font-size: 12px;
		color: #ff5a5f;
	}

	.shop-price-text {
		font-size: 16px;
	}

	.hot-tag {
		background: #ff5a5f;
		border: none;
		color: #fff;
	}

	.button-box {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		background: #007AFF;
		color: #fff;
	}

	.uni-link {
		flex-shrink: 0;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	// 默认加入 scoped ，所以外面加一层提升权重
	.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			/deep/ .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
				/deep/
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}
</style>
